<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-28 20:57:51
 * @LastEditTime: 2023-06-29 12:13:19
 * @FilePath: \my-project\src\views\home\NewsDetailView.vue
-->
<template>
  <div class="new1">
    <div class="banner">
        <div class="banner-con tc cfff">
            <h2 class="fz40">橙券新闻动态</h2>
            <p class="fz20 lh60">新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步</p>
        </div>
    </div>
    <div class="main w1160">
        <div class="crumbs">
            <div class="cru-po mb68 tl mb40">
                <a href="#" class="c999 icon-font-my">新闻动态&nbsp;&nbsp;</a>
                <span class="c333"> {{newData.title}}</span>
            </div>
            <div class="cru-title tc">
                <h3 class="con-title fz30 fw400 c333 mb25">
                    {{newData.title}}
                </h3>
                <p class="con-time mb42 c666">
                    {{newData.createdAt}}
                </p>
            </div>
        </div>
        <div class="wrap-main">
            <div class="main-con tc" v-html="newData.content">
            </div>
        </div>
        <div class="con-page flex flex-between">
            <a @click="handleLast(NewIdx)" v-if="setLeftState">上一篇：{{getNewTitle(NewIdx-1)}}</a>
            <a @click="handleNext(NewIdx)" v-if="setRightState">下一篇：{{getNewTitle(NewIdx+1)}}</a>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  components:{},
  data(){
    return {
        newData: {},
        newIdList: [],
        newTitle: [],
        NewIdx: 0,
    }
  },
created(){
    this.getNewList();
    this.getOneNew(this.getNewId);

},
mounted(){
  
},
watch:{},
computed:{
  // 获取新闻ID
 getNewId() {
    return this.$route.params.id;
 },
   //设置底部导航页状态
   setLeftState() {
    if (this.NewIdx === 0)
    {
      return false;
    }
    return true;
  },
  setRightState() {
    if (this.NewIdx === this.newIdList.length - 1)
    {
      return false;
    }
    return true;
  }
},
methods:{
    //获取新闻标题
    getNewTitle(NewIdx) {
    let title = this.newTitle[NewIdx];
    return title;
  },
        //   获取单条新闻
  async getOneNew (id) {
    const data = await this.$req(`/news/${id}`, 'get');
    console.log('data', data);
    this.newData = data.data;
  },
    //获取新闻id,title列表
    async getNewList () {
    const data = await this.$req('/newslist', 'get');
    console.log('data:', data);
    this.newIdList = data.data.map((item) => {
      return item._id
    });
    this.newTitle = data.data.map((item) => {
      return item.title
    })
    this.getNewIndex(this.getNewId);
  },
  //获取新闻下标
   getNewIndex (id) {
    this.NewIdx = this.newIdList.indexOf(id);
    console.log(this.NewIdx);
   },
   //跳转到上一条新闻
  handleLast(localIdx) {
    let lastNewId = this.newIdList[localIdx - 1];
    this.$router.push({name:'details', params: {id: lastNewId}});
  },
  //跳转到下一条新闻
  handleNext(localIdx) {
    let lastNewId = this.newIdList[localIdx + 1];
    this.$router.push({name:'details', params: {id: lastNewId}});
  }

},
}
</script>
<style  scoped>


.icon-font-my {
  position: relative;
}

.mb40 {
  margin-bottom: 40px;
}

.icon-font-my:after {
  position: absolute;
  z-index: 9999;
  top: 0;
  right: -6px;
  content: "\e6b9";
  font-family: "iconfont" !important;
  font-size: 16px;
  transform: rotate(-90deg);
}

.top-con .pull-list:hover .pull-con-item {
  visibility: visible;
  max-height: 150px;
}

.top-con .pull-list:hover.icon-font:after {
  transform: rotate(180deg);
}

.top-con .pull-list .pull-con-item li {
  float: none;
  height: 35px;
  line-height: 35px;
}

.banner {
  position: relative;
  height: 200px;
  background: url(../../assets/images/banner-new.png) no-repeat center/cover;
}

.banner-con {
  position: absolute;
  width: 847px;
  height: 122px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.main {
  box-sizing: border-box;
  padding: 60px 0px 50px;
}

.wrap-main {
  padding: 0px 200px;
}


.main-con p:not(.con-time) {
  text-align: left;
  text-indent: 2em;
  line-height: 30px;
  color: #666;
  margin-bottom: 25px;
}

.main .con-page a {
  cursor: pointer;
}

.main .con-page a:hover {
  color: #ff7200;
 }

 .footer {
  box-sizing: border-box;
  background-color: rgb(34, 33, 47);
  height: 382px;
  padding-top: 36px;
}

.footer .footer-con {
  border-bottom: 1px solid rgb(76, 79, 95);
  padding-bottom: 20px;
}

.footer .con-serve {
  position: relative;
  width: 351px;
  height: 242px;
  align-items: center;
  border-right: 1px solid rgb(76, 79, 95);
}

.footer .con-serve:after {
  position: absolute;
  content: "";
  top: 4px;
  left: 66px;
  width: 43px;
  height: 43px;
  background: url(../../assets/images/Customer.png) no-repeat center/cover;
}

.footer .con-serve .con-tel {
  text-align: right;
  padding-left: 30px;
}

.footer .con-cor {
  flex-grow: 1;
}

.footer .con-cor dt {
  margin-bottom: 42px;
}

.footer .con-cor dd {
  margin-bottom: 20px;
  font-size: 14px;
}

.footer .con-cor a {
  color: rgb(175, 175, 175);
}

.footer .logotype {
  color: #7e8088;
  font-size: 14px;
  padding: 21px 0 25px;
}

.crumbs {
  position: relative;
  border-bottom: 1px solid #e5e5e5;
}

.crumbs:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 49%;
  width: 25px;
  height: 3px;
  background-color: #ff7200;
}

.main-con {
  padding-top: 41px;
  padding-bottom: 55px;
}
</style>